<template>
	<view class="search-bar">
		<view class="input-wrapper">
			<uni-easyinput prefixIcon="search" placeholder="请输入您想要的内容"  @input="input" confirmType="search"
				@confirm="confirmSearch" trim @clear="clearSearch"/>
		</view>
		<view class="my-order-btn" @click="onClickBtn" :style="{'text-align':val.length?'center':'right'}">
			{{val.length?'搜索':'我的订单'}}
		</view>
	</view>
</template>






<script lang="ts">
	export default {
		emits: ['update:modelValue', 'confirmSearch','clearSearch'],
		options: {
			styleIsolation: 'shared'
		},
		data() {
			return {
				val: '',
			}
		},
		methods: {
			input(e : string) {
				console.log(e)
				this.val = e;
				this.$emit('update:modelValue', e);
			},
			confirmSearch() {
				this.$emit('confirmSearch');
			},
			clearSearch(){
				console.log('clearSearch');
				this.$emit('clearSearch');
			},
			onClickBtn(){
				if(this.val.length){
					this.confirmSearch();
				}else{
					this.jump();
				}
			},
			jump() {
				uni.router.route('/pages_mall/my_order/myOrder');
			}
		}
	}
</script>

<style scoped lang="scss">
	@import "./searchBar.scss";
</style>